<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>xxx商城</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
    <style>
        .el-header a{
            color: #ff0000;
            text-decoration: none;
        }
        .el-menu.el-menu--horizontal{
            border-bottom: 0;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <div class="header-wrapper">
                <div class="logo">
                    <img src="https://via.placeholder.com/100x50?text=Logo" alt="Logo">
                </div>
                <div class="header-nav">
                    <el-menu mode="horizontal">
                        <el-menu-item index="1">首页</el-menu-item>
                        <el-menu-item index="2">商品分类</el-menu-item>
                        <el-menu-item index="3">购物车</el-menu-item>
                        <el-menu-item index="4">我的订单</el-menu-item>
                        <el-menu-item index="5">登录</el-menu-item>
                        <el-menu-item index="6">注册</el-menu-item>
                    </el-menu>
                </div>
                <div class="header-search">
                    <el-input placeholder="请输入搜索内容"></el-input>
                </div>
            </div>
        </el-header>
        <el-main>
            <div class="banner">
                <img src="https://via.placeholder.com/800x400?text=Banner" alt="Banner">
            </div>
            <div class="hot-products">
                <div class="title">热门商品</div>
                <el-row>
                    <el-col :md="6" v-for="product in hotProducts" :key="product.id">
                        <el-card shadow="hover" class="product-card">
                            <img src="https://via.placeholder.com/200x200?text=Product" alt="Product">
                            <div class="product-info">
                                <div class="product-name">{{ product.name }}</div>
                                <div class="product-price">{{ product.price }}</div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
            <div class="new-products">
                <div class="title">新品上市</div>
                <el-row>
                    <el-col :md="6" v-for="product in newProducts" :key="product.id">
                        <el-card shadow="hover" class="product-card">
                            <img src="https://via.placeholder.com/200x200?text=Product" alt="Product">
                            <div class="product-info">
                                <div class="product-name">{{ product.name }}</div>
                                <div class="product-price">{{ product.price }}</div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </el-main>
        <el-footer>
            <div class="footer-wrapper">
                <div class="footer-nav">
                    <el-menu mode="horizontal">
                        <el-menu-item index="1">关于我们</el-menu-item>
                        <el-menu-item index="2">联系我们</el-menu-item>
                        <el-menu-item index="3">隐私政策</el-menu-item>
                        <el-menu-item index="4">服务条款</el-menu-item>
                    </el-menu>
                </div>
                <div class="footer-info">
                    © 2023 xxx商城 版权所有
                </div>
            </div>
        </el-footer>
    </el-container>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            hotProducts: [
                { id: 1, name: '商品1', price: '￥100.00' },
                { id: 2, name: '商品2', price: '￥200.00' },
                { id: 3, name: '商品3', price: '￥300.00' },
                { id: 4, name: '商品4', price: '￥400.00' },
            ],
            newProducts: [
                { id: 5, name: '商品5', price: '￥500.00' },
                { id: 6, name: '商品6', price: '￥600.00' },
                { id: 7, name: '商品7', price: '￥700.00' },
                { id: 8, name: '商品8', price: '￥800.00' },
            ]
        }
    })
</script>
</body>
</html>